<template>
  <body>
    <div class="head">
      <div class="h_left">
        <router-link to="/user">
          <span class="h_l_coin"></span>
        </router-link>
      </div>
      <h1>我的收货地址</h1>
    </div>
    <div class="myaddress_list">
      <div class="no_address" v-if="!getaddresslist.length">
        <img src="https://m.9bianli.com/Images/newPhoto/address_no.png" />
        <div class="n_a_m">还没有地址，快新建一个吧~</div>
      </div>
      <van-address-list
          v-model="chosenAddressId"
          :list="getaddresslist"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
        />
    </div>
  </body>
</template>

<script>
export default {
  data() {
    return {
      chosenAddressId: '1',
      list: [],
    };
  },
  computed: {
    getaddresslist() {
      return this.$store.getters['addressList/getAddressList'] 
    }
  },
  methods: {
    onAdd() {
      this.$router.push('/addresseidit')
    },
    onEdit(item) {
      this.$router.push({
          path:'/addresseidit',
          query:{
            item
          }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.van-address-list__bottom .van-button--danger{
  background-color: orange;
  border: 1px solid orange;
}
.head {
    background-color: #fff;
    height: 46px;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 640px;
    z-index: 2;
}
.myaddress_list {
    margin-bottom: 100px;
    margin-top: 61px;
    padding: 0 15px;
}
.add_address {
    width: 100%;
    max-width: 640px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background: #FFD100;
    position: fixed;
    bottom: 0;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}
.no_address {
    text-align: center;
    font-size: 15px;
    color: #999;
    margin-top: 60%;
}
.no_address img {
    width: 49%;
    margin: auto;
}
.head h1 {
    font-size: 17px;
    font-weight: 400;
    width: 70%;
    margin: 0 auto;
    line-height: 46px;
}
.h_l_coin {
    width: 10px;
    height: 17px;
    background: url(https://m.9bianli.com/Images/couponCenter/fanhuijian.png) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    margin-top: 15px;
}
.h_left {
    position: absolute;
    left: 0;
    top: 0;
    width: 10%;
    height: 100%;
    text-align: center;
}
</style>